<!doctype html>
<html>
  <head>
    <title>template distribute</title>
    <script src="../../polymer.js"></script>
    <script src="../../tools/test/htmltest.js"></script>
    <script src="../../node_modules/chai/chai.js"></script>
  </head>
  <body>

  <x-test></x-test>
  
  <polymer-element name="x-echo">
    <template>
      <div>Echoing:</div>
      <content select="*"></content>
    </template>
    <script>
      Polymer('x-echo');
    </script>  
  </polymer-element>

  <polymer-element name="x-test">
    <template>
      <x-echo id="echo">
        <template repeat="{{list}}">
          <div>{{name}}</div>
        </template>
      </x-echo>
    </template>
    <script>
      Polymer('x-test', {
        ready: function() {
          setTimeout(function() {
            this.list = [
              {name: 'foo'},
              {name: 'bar'}
            ];
            Platform.flush();
            // tickle
            this.offsetHeight;
            var children = this.$.echo.children;

            chai.assert.equal(children[0].localName, 'template',
              'shadowDOM dynamic distribution via template');
            chai.assert.equal(children[1].textContent, 'foo',
              'shadowDOM dynamic distribution via template');
            chai.assert.equal(children[2].textContent, 'bar',
              'shadowDOM dynamic distribution via template');

            if (window.ShadowDOMPolyfill) {
              var actualChildren = this.$.echo.impl.children;
              chai.assert.equal(actualChildren.length, 4,
                'shadowDOMPolyfill distributes expected number of actual children.');
            }
            done();
          }.bind(this), 50);
        }
      });
    </script>
  </polymer-element>

  </body>
</html>
